<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
</head>
<body>
	<ul>
		<li>符号生成器：三角形、十字架、菱形、圆形符号</li>
		<li>d3.svg.symbol()</li>
		<li>symbol(datum[,index])</li>
		<li>symbol.type([type])</li>
		<li>symbol.size([size])</li>
		<li>d3.svg.symbolTypes - 这是一个数组 ["circle", "cross", "diamond", "square", "triangle-down", "triangle-up"]</li>
	</ul>
	<div class="symbol">
		
	</div>
	<script src="js/d3_3.5.7.js"></script>
	<script>
		console.log(d3.svg.symbolTypes)
		var width = 500;
		var height = 500
		var svg = d3.select(".symbol").append('svg').attr({"width":width,"height":height});

		var n = 30;
		var dataset = [];
		for(var i = 0;i < n;i++) {
			dataset.push({
				size:Math.random() * 30 + 200,
				type:d3.svg.symbolTypes[Math.floor(Math.random() * d3.svg.symbolTypes.length)]
			})
		}
		var symbol = d3.svg.symbol()
										.size(function(d) {
											return d.size;
										})
										.type(function(d) {
											return d.type;
										})
		var color = d3.scale.category20();

		svg.selectAll("path").data(dataset).enter().append('path')
				.attr("d",function(d) {
					return symbol(d);
				})
				.attr("transform",function(d,i) {
					var x = 100 + i % 5 * 20;
					var y = 100 + Math.floor(i / 5) * 20;
					return "translate(" + x +"," + y + ")"
				})
				.attr("fill",function(d,i) {
					return color(i);
				})
	</script>
</body>
</html>